import { graphic } from 'echarts'
import { defineOptions } from '@/util/echarts'

export const line1 = defineOptions({
  title: {
    text: '圆滑折线图',
    x: 'center'
  },
  tooltip: {
    show: 'true',
    trigger: 'axis',
    // formatter: '{b}<br />总数: {c0}',
    formatter: params => params.map(value => `${value.marker}${value.name}<br/>总数: ${value.value}`),
    backgroundColor: 'rgba(0,0,0,0.7)', // 背景
    padding: [8, 10], // 内边距
    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '10月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [10, 20, 15, 35, 45, 25, 35, 30, 40, 45, 30, 20],
      type: 'line',
      smooth: true
    }
  ],
  color: ['#ff9e3d']
})

export const line2 = defineOptions({
  title: {
    text: '折线图',
    x: 'center'
  },
  tooltip: {
    show: 'true',
    trigger: 'axis',
    // formatter: '{b}<br />总数: {c0}',
    formatter: params => params.map(value => `${value.marker}${value.name}<br/>总数: ${value.value}`),
    backgroundColor: 'rgba(0,0,0,0.7)', // 背景
    padding: [8, 10], // 内边距
    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 100, 901, 934, 1290, 50, 1320],
      type: 'line'
    }
  ],
  color: ['#1fd528']
})

export const line33 = defineOptions({
  backgroundColor: '#131e54',
  tooltip: {
    show: 'true',
    trigger: 'axis',
    formatter: '{b}<br />总数: {c0}',
    backgroundColor: 'rgba(0,0,0,0.7)', // 背景
    padding: [8, 10], // 内边距
    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  title: {
    text: '圆滑折线图',
    x: 'center',
    y: 10,
    textStyle: {
      color: '#fff',
      fontSize: 16
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#32346c'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#32346c '
      }
    },
    axisLabel: {
      color: '#bac0c0',
      fontWeight: 'normal',
      fontSize: '12'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#32346c'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#32346c '
      }
    },
    axisTick: {
      show: false
    },
    splitArea: {
      show: false
    },
    axisLabel: {
      inside: false,
      color: '#bac0c0',
      fontWeight: 'normal',
      fontSize: '12'
    }
  },
  series: [
    {
      data: [820, 100, 901, 934, 1290, 50, 1320],
      type: 'line',
      smooth: true
    }
  ],
  color: ['#ff9e3d']
})

const color = [
  '#3b7186',
  '#2e8d94',
  '#637b69',
  '#789b6f',
  '#3b64a6',
  '#2672cc',
  '#503e8d',
  '#5d3ec5',
  '#874f5f',
  '#b6575c',
  '#623363',
  '#962e66'
]

const xData = []
for (let i = 2011; i < 2017; i++) {
  xData.push(`${i}年`)
}

export const line3 = defineOptions({
  backgroundColor: '#131e54',
  title: {
    text: '言论趋势',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 16,
      color: '#F1F1F3'
    },
    top: 10,
    x: 'center'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  tooltip: {
    show: 'true',
    trigger: 'item',
    formatter: '{b}<br />{a0}: {c0}%',
    backgroundColor: 'rgba(0,0,0,0.7)', // 背景
    padding: [8, 10], // 内边距
    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  xAxis: {
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#32346c'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#32346c '
      }
    },
    axisLabel: {
      color: '#bac0c0',
      fontWeight: 'normal',
      fontSize: '12',
      formatter: '{value}%'
    }
  },
  yAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#32346c'
      }
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitArea: {
      show: false
    },
    axisLabel: {
      inside: false,
      color: '#bac0c0',
      fontWeight: 'normal',
      fontSize: '12'
    },
    data: xData
  },
  series: [
    {
      name: '民众言论倾向性趋势',
      type: 'bar',
      itemStyle: {
        show: true,
        color: params => {
          const colorList = []
          for (let i = 6; i > 0; i--) {
            colorList.push({
              type: 'bar',
              colorStops: [
                {
                  offset: 0,
                  color: color[i * 2 - 2] // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: color[i * 2 - 1] // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            })
          }
          return colorList[params.dataIndex]
        },
        borderRadius: 50,
        borderWidth: 0,
        borderColor: '#333'
      },
      barGap: '0%',
      barCategoryGap: '50%',
      data: [12, 32, 91, 34, 76, 20]
    }
  ]
})

export const line4 = defineOptions({
  title: {
    text: '自定义的折柱混合--BarLine',
    left: 'center',
    y: 3,
    textStyle: {
      color: '#fff',
      fontSize: 14
    }
  },
  backgroundColor: '#23243a',
  color: '#384757',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#384757'
      }
    }
  },
  legend: {
    data: [
      {
        name: '待处理',
        icon: 'circle',
        textStyle: {
          color: '#7d838b'
        }
      },
      {
        name: '已处理',
        icon: 'circle',
        textStyle: {
          color: '#7d838b'
        }
      },
      {
        name: '完成率',
        icon: 'circle',
        textStyle: {
          color: '#7d838b'
        }
      }
    ],
    top: '10%',
    textStyle: {
      color: '#fff'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['1街', '2街', '3街', '4街', '5街', '6街'],
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        show: true,
        color: '#7d838b'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '不文明现象',
      nameTextStyle: {
        color: '#7d838b'
      },
      min: 0,
      max: 50,
      interval: 10,
      axisLabel: {
        show: true,
        color: '#7d838b'
      },
      axisLine: {
        show: true
      },
      splitLine: {
        lineStyle: {
          color: '#7d838b'
        }
      }
    },
    {
      type: 'value',
      name: '完成率',
      show: true,
      axisLabel: {
        show: true,
        color: '#7d838b'
      }
    }
  ],
  grid: {
    top: '20%'
  },
  series: [
    {
      name: '待处理',
      type: 'bar',
      data: [4, 6, 36, 6, 8, 6],
      barWidth: 'auto',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(255,37,117,0.7)'
            },
            {
              offset: 0.5,
              color: 'rgba(0,133,245,0.7)'
            },
            {
              offset: 1,
              color: 'rgba(0,133,245,0.3)'
            }
          ],
          globalCoord: false
        }
      }
    },
    {
      name: '已处理',
      type: 'bar',
      data: [4, 2, 36, 6, 8, 6],
      barWidth: 'auto',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(255,37,117,0.7)'
            },
            {
              offset: 0.5,
              color: 'rgba(0,255,252,0.7)'
            },
            {
              offset: 1,
              color: 'rgba(0,255,252,0.3)'
            }
          ],
          globalCoord: false
        }
      },
      barGap: '0'
    },
    {
      name: '完成率',
      type: 'line',
      yAxisIndex: 1,
      data: [100, 33, 100, 100, 100, 100],
      itemStyle: {
        color: '#ffaa00'
      },
      smooth: true
    }
  ]
})

export const line5 = defineOptions({
  backgroundColor: '#142058',
  // title: {

  //     textStyle: {
  //         color: '#00FFFF',
  //         fontSize: 24
  //     }
  // },
  legend: {
    top: 20,
    textStyle: {
      color: '#fff'
    },
    data: ['男', '女', '111']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  tooltip: {
    show: 'true',
    trigger: 'item',
    backgroundColor: 'rgba(0,0,0,0.7)', // 背景
    padding: [8, 10], // 内边距
    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
    formatter: params => {
      if (params.seriesIndex === '3' || params.seriesIndex === '4' || params.seriesIndex === '5') {
        return `${params.name}<br>${params.seriesName} ： 第 ${params.value} 名`
      }
    }
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#363e83'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#363e83 '
      }
    },
    axisLabel: {
      color: '#fff',
      fontWeight: 'normal',
      fontSize: '12'
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#363e83'
        }
      },
      axisLabel: {
        inside: false,
        color: '#fff',
        fontWeight: 'normal',
        fontSize: '12'
      },
      data: ['会', '不会', '看情况']
    },
    {
      type: 'category',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitArea: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: ['会', '不会', '看情况']
    }
  ],
  series: [
    {
      type: 'bar',
      xAxisIndex: 1,
      zlevel: 1,
      itemStyle: {
        color: '#121847',
        borderWidth: 0,
        shadowBlur: {
          shadowColor: 'rgba(255,255,255,0.31)',
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 2
        }
      },
      barWidth: '10%',
      data: [30, 30, 30]
    },
    {
      type: 'bar',
      xAxisIndex: 1,
      barGap: '100%',
      data: [30, 30, 30],
      zlevel: 1,
      barWidth: '10%',
      itemStyle: {
        color: '#121847',
        borderWidth: 0,
        shadowBlur: {
          shadowColor: 'rgba(255,255,255,0.31)',
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 2
        }
      }
    },
    {
      type: 'bar',
      xAxisIndex: 1,
      barGap: '100%',
      data: [30, 30, 30],
      zlevel: 1,
      barWidth: '10%',
      itemStyle: {
        color: '#121847',
        borderWidth: 0,
        shadowBlur: {
          shadowColor: 'rgba(255,255,255,0.31)',
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 2
        }
      }
    },
    {
      name: '男',
      type: 'bar',
      itemStyle: {
        show: true,
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#f7734e'
          },
          {
            offset: 1,
            color: '#e12945'
          }
        ]),
        borderRadius: 50,
        borderWidth: 0
      },
      zlevel: 2,
      barWidth: '10%',
      data: [8, 15, 10]
    },
    {
      name: '女',
      type: 'bar',
      barWidth: '10%',
      itemStyle: {
        show: true,
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#96d668'
          },
          {
            offset: 1,
            color: '#01babc'
          }
        ]),
        borderRadius: 50,
        borderWidth: 0
      },
      zlevel: 2,
      barGap: '100%',
      data: [8, 17, 26]
    },
    {
      name: '111',
      type: 'bar',
      barWidth: '10%',
      itemStyle: {
        show: true,
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#1a98f8'
          },
          {
            offset: 1,
            color: '#7049f0'
          }
        ]),
        borderRadius: 50,
        borderWidth: 0
      },
      zlevel: 2,
      barGap: '100%',
      data: [8, 17, 26]
    }
  ]
})

export const line6 = defineOptions({
  backgroundColor: '#23243a',
  tooltip: {
    // 提示框组件
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        backgroundColor: '#6a7985'
      }
    },
    textStyle: {
      color: '#fff',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 12
    }
  },
  grid: {
    left: '1%',
    right: '4%',
    bottom: '6%',
    top: 30,
    padding: '0 0 10 0',
    containLabel: true
  },
  legend: {
    // 图例组件，颜色和名字
    right: 10,
    top: 0,
    itemGap: 16,
    itemWidth: 18,
    itemHeight: 10,
    data: [
      {
        name: '流入'
        // icon:'image://../wwwroot/js/url2.png', //路径
      },
      {
        name: '流出'
      }
    ],
    textStyle: {
      color: '#a8aab0',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 12
    }
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true, // 坐标轴两边留白
      data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
      axisLabel: {
        // 坐标轴刻度标签的相关设置。
        interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
        margin: 15,
        color: '#078ceb',
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        fontSize: 12
      },
      axisTick: {
        // 坐标轴刻度相关设置。
        show: false
      },
      axisLine: {
        // 坐标轴轴线相关设置
        lineStyle: {
          color: '#fff',
          opacity: 0.2
        }
      },
      splitLine: {
        // 坐标轴在 grid 区域中的分隔线。
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitNumber: 5,
      axisLabel: {
        color: '#a8aab0',
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        fontSize: 12
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#fff'],
          opacity: 0.06
        }
      }
    }
  ],
  series: [
    {
      name: '流入',
      type: 'bar',
      data: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6, 4.2, 3.6, 6, 6.4],
      barWidth: 10,
      barGap: 0, // 柱间距离
      label: {
        // 图形上的文本标签
        show: true,
        position: 'top',
        color: '#a8aab0',
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        fontSize: 12
      },
      itemStyle: {
        // 图形样式
        borderRadius: [5, 5, 0, 0],
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 1,
              color: 'rgba(127, 128, 225, 0.7)'
            },
            {
              offset: 0.9,
              color: 'rgba(72, 73, 181, 0.7)'
            },
            {
              offset: 0.31,
              color: 'rgba(0, 208, 208, 0.7)'
            },
            {
              offset: 0.15,
              color: 'rgba(0, 208, 208, 0.7)'
            },
            {
              offset: 0,
              color: 'rgba(104, 253, 255, 0.7)'
            }
          ],
          false
        )
      }
    },
    {
      name: '流出',
      type: 'bar',
      data: [2.9, 5, 4.4, 2.7, 5.7, 4.6, 1.2, 2.7, 4.8, 6.0],
      barWidth: 10,
      barGap: 0.2, // 柱间距离
      label: {
        // 图形上的文本标签
        show: true,
        position: 'top',
        color: '#a8aab0',
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        fontSize: 12
      },
      itemStyle: {
        // 图形样式
        borderRadius: [5, 5, 0, 0],
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 1,
              color: 'rgba(127, 128, 225, 0.7)'
            },
            {
              offset: 0.9,
              color: 'rgba(72, 73, 181, 0.7)'
            },
            {
              offset: 0.25,
              color: 'rgba(226, 99, 74, 0.7)'
            },
            {
              offset: 0,
              color: 'rgba(253, 200, 106, 0.7)'
            }
          ],
          false
        )
      }
    }
  ]
})

const map = {
  CMCC: '中国移动',
  CTCC: '中国联通',
  CUCC: '中国电信'
}

export const line7 = defineOptions({
  backgroundColor: '#23243a',
  title: {
    top: 20,
    text: '占比',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 16,
      color: '#F1F1F3'
    },
    left: '3%'
  },
  tooltip: {
    trigger: 'axis',
    formatter: params =>
      params
        .map(value => `${value.marker}${value.seriesName} (${map[value.seriesName]})：${value.value} %`)
        .join('<br>'),
    axisPointer: {
      lineStyle: {
        color: '#57617B'
      }
    }
  },
  legend: {
    top: 20,
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ['CMCC', 'CTCC', 'CUCC'],
    right: '4%',
    textStyle: {
      fontSize: 12,
      color: '#F1F1F3'
    }
  },
  grid: {
    top: 100,
    left: '2%',
    right: '2%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#078ceb'
        }
      },
      data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '(%)',
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#078ceb'
        }
      },
      axisLabel: {
        margin: 10,
        fontSize: 14
      },
      splitLine: {
        lineStyle: {
          color: '#57617B'
        }
      }
    }
  ],
  series: [
    {
      name: 'CMCC',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        width: 1
      },
      areaStyle: {
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(137, 189, 27, 0.3)'
            },
            {
              offset: 0.8,
              color: 'rgba(137, 189, 27, 0)'
            }
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      },
      itemStyle: {
        color: 'rgb(137,189,27)',
        borderColor: 'rgba(137,189,2,0.27)',
        borderWidth: 12
      },
      data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
    },
    {
      name: 'CTCC',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        width: 1
      },
      areaStyle: {
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(0, 136, 212, 0.3)'
            },
            {
              offset: 0.8,
              color: 'rgba(0, 136, 212, 0)'
            }
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      },
      itemStyle: {
        color: 'rgb(0,136,212)',
        borderColor: 'rgba(0,136,212,0.2)',
        borderWidth: 12
      },
      data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
    },
    {
      name: 'CUCC',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        width: 1
      },
      areaStyle: {
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(219, 50, 51, 0.3)'
            },
            {
              offset: 0.8,
              color: 'rgba(219, 50, 51, 0)'
            }
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      },
      itemStyle: {
        color: 'rgb(219,50,51)',
        borderColor: 'rgba(219,50,51,0.2)',
        borderWidth: 12
      },
      data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
    }
  ]
})
